<div class="userUnions form">
    <?php echo $this->Form->create('UserUnion', array('type' => 'file')); ?>
    <fieldset>
        <legend><?php echo __('Eligibility'); ?></legend>
        <?php
        echo $this->Form->input('UserUnion.0.user_id', array('type' => 'hidden', 'value' => $_SESSION['UserID']));
        echo $this->Form->input('UserUnion.0.union_id');
        echo $this->Form->input('UserUnion.0.union_no');
        ?>
        <hr/><br/>
        <div id="union-div">

        </div>
        <a href="#" id="add-union" onclick="return false;">Add Union</a>
        <?php
        echo $this->Form->input('UserAgent.agency_name');
        echo $this->Form->input('UserAgent.agent_name');
        echo $this->Form->input('UserAgent.agent_phone',array('class'=>'phone'));
        echo $this->Form->input('UserUnion.0.non_union_docs', array('type' => 'file'));
        echo $this->Form->input('UserUnion.0.total_unions', array('type' => 'hidden', 'value' => '1', 'id' => 'total_unions'));
        ?>
    </fieldset>
    <?php echo $this->Form->input('Save Draft',array('id'=>'save-draft','type'=>'button')); ?>
    <?php echo $this->Form->end(__('Next')); ?>
</div>
<script>
    $().ready(function() {
        $(".phone").mask("(999) 999-9999")
    });
</script>
<script>
    $().ready(function() {
        $("#content").on('click', "#add-union", function() {
            var total = $('#total_unions').val();
            $.ajax({url: "<?php echo $this->Html->url(array('controller' => 'users', 'action' => 'add_union', 'em' => false)); ?>/" + total, success: function(result) {
                    $("#union-div").append(result);
                    total++;
                    $('#total_unions').val(total);
                }
            });
        });
        $("#content").on("click", ".remove-union", function() {
            $(this).parent('.union-container').remove();
        });
    });
</script>